<template>
    <!-- 这是商品的详情页面 点进来购买商品 -->
  <div class="flowerDetail">
    <el-page-header @back="goBack" content=""> </el-page-header>
    <el-card class="box-card">
      <div class="text">
        <div class="left">
          <img :src="require(`../../assets/${this.img}`)"  alt="" />
          
        </div>
        <div class="right">

          <div class="card">
            <div class="redcard">
              <div class="price">
                <div class="shoujia">
                    名称：<span  style="color: #fdca00"><b>{{ fname }}</b></span>
                  <p>
                    售价：<span>￥{{ price }}</span>
                  </p>
                </div>
              </div>
              <div class="time">
                <div>配送时间：</div>

                <div class="peisong">全日配送</div>
              </div>
            </div>
            <div class="sign">
              <p>
                花语：<span class="common">{{ descs }}</span>
              </p>
              <p>
                保障：<span class="common">{{ bz }}</span>
              </p>
              <p>
                数量：
              </p>
              <div style="" :class="{ counting: true, disabled }">
                <div class="reduce" @click="changNum2('-')">
                  -
                </div>
                <div class="input_box">
                  <div class="wrap" v-if="disabled" />
                  <input
                      type="text"
                      v-model="numObj.num"
                      @blur="changNum2('input')"
                      @keyup="amountKeydownFun"
                  />
                </div>
                <div class="add" @click="changNum2('+')">
                  +
                </div>
              </div>
              <div class="block">
                <span class="demonstration">预定时间：</span>
                <el-date-picker
                  v-model="time"
                  type="datetime"
                  placeholder="选择日期时间"
                  size="small"
                >
                </el-date-picker>
              </div>
            </div>
          </div>

          <div class="button">
            <el-button
              type="danger"
              icon="el-icon-shopping-cart-1"
              round
              size="medium"
              @click="add"
              >加入购物车</el-button
            >
            <el-button type="danger" icon="el-icon-goods" round size="medium" @click="goBuy"
              >立即购买</el-button
            >
<!--            <el-button type="danger" icon="el-icon-star-off" round size="medium" @click="star"-->
<!--              >收藏商品</el-button-->
<!--            >-->
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: "counting",
  props: {
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 显示数字
    numbers: {
      type: Number,
      default: 1
    },
    // 最大
    maxNum: {
      type: Number,
      default: 50
    },
    // 最小
    minNum: {
      type: Number,
      default: 1
    },
    // 库存
    stockNum: {
      type: Number,
      default: 50
    }
  },
  components: {},
  data() {
    return {
      numObj: {
        num: 1,
        type: ""
      },
      cnt: 1,
      fid: 0,
      price:'',
      fname:'',
      descs: '',
      img:'',
      bz: "保价服务·急速退款",
      qy: "先用后付，确认收货再付",
      sm: "全国(小城市请提前一天预定)",
      time:'',
      flower:{},
      userInfo: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) :{}
    };
  },
  watch: {},
  computed: {},
  methods: {
    amountKeydownFun() {
      if (this.numObj.num.length == 1) {
        this.numObj.num = this.numObj.num.toString().replace(/[^1-9]/g, "");
      } else {
        this.numObj.num = this.numObj.num.toString().replace(/\D/g, "");
      }
    },
    changNum2(type) {
      if (this.disabled) return;
      // 点击加号或者减号
      if (type == "+" || type == "-") {
        this.numObj.type = "btn";
        // +
        if (type == "+") {
          this.numObj.num++;
          // 如果存在最大购买值
          if (this.maxNum) {
            // 存在最大购买值并且最大购买值 >= 库存，则等于库存
            if (
                this.maxNum >= this.stockNum &&
                (this.numObj.num >= this.stockNum ||
                    this.numObj.num > this.maxNum)
            ) {
              this.numObj.num = this.stockNum;
              // 存在最大购买值并且最大购买值 < 库存，则等于最大购买
            } else if (this.numObj.num >= this.maxNum) {
              this.numObj.num = this.maxNum;
            }
            // 不存在最大购买值
          } else {
            if (this.stockNum >= 999 && this.numObj.num >= 999) {
              this.numObj.num = 999;
              // 如果库存没有超过999，最大值为库存
            } else if (this.numObj.num >= this.stockNum) {
              this.numObj.num = this.stockNum;
            }
          }
        }
        // -
        if (type == "-") {
          this.numObj.num--;
          // 如果有最大购买
          if (this.maxNum && this.maxNum < this.stockNum) {
            if (this.numObj.num > this.maxNum) {
              this.numObj.num = this.maxNum;
            }
          } else {
            if (this.numObj.num > this.stockNum) {
              this.numObj.num = this.stockNum;
            }
          }
          // 如果存在最小购买值
          if (this.minNum) {
            if (this.numObj.num < this.minNum) {
              this.numObj.num = this.minNum;
            }
          } else {
            if (this.numObj.num < 1) {
              this.numObj.num = 1;
            }
          }
        }
      }
      // 输入框输入
      if (type == "input") {
        this.numObj.type = "input";
        if (this.numObj.num.toString().indexOf(".") != -1) {
          let idx = this.numObj.num.toString().indexOf(".");
          this.numObj.num = Number(this.numObj.num.toString().slice(0, idx));
        }
        if (this.maxNum) {
          if (this.maxNum > this.stockNum) {
            if (this.numObj.num >= this.stockNum) {
              this.numObj.num = this.stockNum;
            }
          } else {
            if (this.numObj.num >= this.maxNum) {
              this.numObj.num = this.maxNum;
            }
          }
        } else {
          if (this.stockNum >= 999 && this.numObj.num >= 999) {
            this.numObj.num = 999;
            // 如果库存没有超过999，最大值为库存
          } else if (this.numObj.num >= this.stockNum) {
            this.numObj.num = this.stockNum;
          }
        }
        if (this.minNum) {
          if (this.numObj.num <= this.minNum) {
            this.numObj.num = this.minNum;
          }
        } else {
          if (this.numObj.num <= 1) {
            this.numObj.num = 1;
          }
        }
      }
      this.$emit("changeNumber", this.numObj);
    },
    goBack() {
      // console.log("go back");
      // 返回上一级 
      this.$router.push('/flower')
    },
    // 加入购物车
    add(){
      if (this.userInfo.data === undefined) {
        this.$router.push("/login");
        this.$message({
          showClose: true,
          type: "warning",
          message: "请进行登录！",
        });
        return
      }
      this.request.post('/gwc',{
        fid: this.fid,
        fname: this.fname,
        descs: this.descs,
        price: this.price,
        uid: this.userInfo.data.id,
        url: this.img,
        cnt: this.numObj.num
      }).then(res=>{
        console.log(res)
        if(res.data.code ==="200"){
          this.$message.success("恭喜小主成功加入购物车！")
        }
      })

    },
    // 收藏
    star(){
      // this.request.post('/sc',this.$store.state.flower).then(res=>{
      //   console.log(res)
      //   if(res.data.code ==="200"){
      //     this.$message.success("恭喜小主成功收藏此刻挚爱！")
      //   }
      // })
      this.request.post("/sc",{
        fname: this.name,
        descs: this.descs,
        price: this.price,
        uid: this.userInfo.data.id,
        url: this.img,
      }).then(res=>{
        if(res.data.code === "200"){
          this.$message.success('恭喜小主成功收藏此刻挚爱！');
        }
      })

    },
    // 立即购买
   goBuy() {
     if (this.userInfo.data === undefined) {
       this.$router.push("/login");
       this.$message({
         showClose: true,
         type: "warning",
         message: "请进行登录！",
       });
       return
     }
     if (this.time === "") {
       this.$message({
         type: "warning",
         message: "请选择日期",
       });
     } else {
       // 进入结算页面之前把选中的数据存到state里
       this.$store.state.select =[]
       const data =[{
         descs:this.$store.state.flower.fdesc,
         fid: this.$store.state.flower.id,
         fname:this.$store.state.flower.fname,
         price:this.$store.state.flower.sprice,
         uid:this.userInfo.data.id,
         cnt:this.numObj.num,
         url:this.$store.state.flower.img
       }]
       this.$store.state.time = this.time;
       this.$store.state.select = data;
       this.$router.push("/buy")
     }
   },

  },
  created() {},
  mounted() {
    // 从flower带参过来
    // 第一种方法：$bus(有bug,第一次点不生效，需要在点进去flower触发)
        //  this.$bus.$on('h',(data)=>{
        //   console.log("手啊啊")
        //   // console.log(data)
        //   this.price = data.sprice
        //   this.name = data.fname
        //   this.descs = data.fdesc
        //   this.url = data.img
        //   console.log(data)
        //   console.log(data.fname)
        //   console.log(this.name)
        //  })

  // 第二种方法：$route传参
    // console.log(this.$route.query)
    //  this.price = this.$route.query.sprice
    // this.name = this.$route.query.fname
    // this.descs = this.$route.query.fdesc
    // this.img = this.$route.query.img

    // 第三种 vuex
    console.log("花》》》》",this.$store.state.flower)
    this.fid = this.$store.state.flower.fid
    this.fname = this.$store.state.flower.fname
    this.price = this.$store.state.flower.sprice
    this.descs =  this.$store.state.flower.fdesc
    this.img =  this.$store.state.flower.img
    this.maxNum = this.$store.state.flower.cnt
    this.stockNum = this.$store.state.flower.cnt
  },
};
</script>
<style lang="less" scoped>
.el-card {
  width: 1200px;
  height: 560px;
  margin-top: 1%;
  margin-left: 9%;
  .text {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .left {
      width: 300px;
      height: 300px;
      img {
        width: 105%;
        height: 120%;
        // border: 1px solid #1b1b1b;
        // box-shadow: 5px 5px 5px 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
      }
    }
  }
  .right {
    margin-left: 50px;
    h1 {
      margin-left: 15px;
      margin-bottom: 15px;
    }
    .card {
      .redcard {
        width: 580px;
        height: 120px;
        background-color: #ff5a49;
        border-radius: 15px 15px 0 0;
        color: #fff;
        font-size: 18px;
        padding: 35px;
      }
      .shoujia span {
        font-size: 18px;
        margin-left: 50px;
      }
      .time {
        display: flex;
        margin-top: 20px;
        .peisong {
          background: #ffddbf;
          width: 100px;
          height: 30px;
          text-align: center;
          border-radius: 20px;
          color: #ff5a49;
        }
      }
      .block {
        padding: 25px 10px;
        color: #737373;
        font-size: 15px;
      }

      .sign {
        margin: 15px;
        p {
          font-size: 15px;
          color: #737373;
          padding: 5px 10px;
        }
        .common {
          margin-left: 30px;
        }
      }
      .button {
        margin-top: 40px;
      }
    }
  }
  .el-button + .el-button {
    margin-left: 0px;
    margin-right: 10px;
  }
  .el-button.is-round {
    float: right;
  }
}

.counting {
  width: 92px;
  height: 24px;
  border: 1px solid #EBEDF0;
  border-radius: 2px;
  user-select: none;
  display: inline-block;
  &.disabled{
    border: 1px solid #F7F8F9;
    .reduce {
      border-right: 1px solid #F7F8F9;
      color: #ADADAE;
    }
    .input_box {
      color: #ADADAE;
      input {
        color: #ADADAE;
      }
    }
    .add {
      border-left: 1px solid #F7F8F9;
      color: #ADADAE;
    }
  }
  div {
    float: left;
    box-sizing: border-box;
    text-align: center;
    line-height: 24px;
    height: 24px;
  }
  .reduce {
    width: 24px;
    border-right: 1px solid #EBEDF0;
    font-size: 14px;
    color: #444;
    text-align: center;
    font-weight: 400;
    cursor: pointer;
  }
  .input_box {
    width: calc(100% - 24px - 24px);
    position: relative;
    .wrap {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.4);
    }
    input {
      border: 0;
      width: 100%;
      height: 100%;
      line-height: 24px;
      font-size: 14px;
      color: #323233;
      text-align: center;
      font-weight: 400;
      /*添加css样式*/
      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
      &[type="number"] {
        -moz-appearance: textfield;
      }
    }
  }
  .add {
    width: 24px;
    border-left: 1px solid #EBEDF0;
    font-size: 14px;
    color: #444;
    text-align: center;
    font-weight: 400;
    cursor: pointer;
  }
  .add,.reduce {
    position: relative;
    &:hover {
      .tip {
        display: block;
      }
    }
    .tip {
      display: none;
      position: absolute;
      height: auto;
      top: 33px;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      background: #303133;
      color: #FFF;
      padding: 3px 10px;
      font-size: 12px;
      border-radius: 4px;
      white-space: nowrap;
      z-index: 91;
      .triangle {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        top: -15px;
        width: 0;
        height: 0;
        border: 8px solid #303133;
        border-right: 8px solid rgba(255, 255, 255, 0);
        border-left: 8px solid rgba(255, 255, 255, 0);
        border-top: 8px solid rgba(255, 255, 255, 0);
      }
    }
  }
}
</style>